<template>
    <Popup v-model="visiable" :class="`tech-dialog ${mode} ${styleMode} ${extClass}`" :close-on-click-overlay="false" :get-container="container">
        <div class="dialog-container">
            <div class="dialog-title title-color">{{title}}</div>
            <div class="dialog-content tip-color">{{content}}<slot></slot></div>
            <div class="dialog-btn border-black-color">
                <Button v-if="haveCancel" class="cancel-btn black-btn-style border-black-color" @click="cancel">{{cancelText}}</Button>
                <Button class="ok-btn black-btn-style border-black-color" @click="ok">{{okText}}</Button>
            </div>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import ModeMixin from '@common/mixin';
export default {
    name: 'TechDialog', // dialog
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
    },
    props: {
        title: String,
        content: String,
        haveCancel: {
            type: Boolean,
            default: true,
        },
        cancelText: {
            type: String,
            default: '取消',
        },
        okText: {
            type: String,
            default: '确定',
        },
        container: String,
        extClass: String,
    },
    computed: {},
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        hide() {
            this.visiable = false;
        },
        cancel() {
            this.$emit('cancel');
            this.hide();
        },
        ok() {
            this.$emit('ok');
            this.hide();
        },
    },
};
</script>

<style lang="less">
.tech-dialog {
    width: calc(100% - 2 * @gap-lg);
    .style-mode();
    .mode-white();
    .dialog-container {
        .flex-column-center();
        .dialog-title {
            .font-size-md();
            font-weight: @font-weight-bold;
            .t-c();
            .m-t(28);
        }
        .dialog-content {
            .m-h(24);
            .m-t(30);
            .m-b(40);
            .font-size();
            color: @tip-color;
            word-break: break-all;
        }
        .dialog-btn {
            width: 100%;
            .flex-row-center();
            border-top: @border;
            .van-button {
                flex: 1;
                height: 56px;
                border: none;
                .font-size-md();
                font-weight: @font-weight-bold;
            }
            .cancel-btn {
                border-right: @border;
                color: @tip-color;
            }
            .ok-btn {
                color: #576B95;
            }
        }
    }
}
</style>
